<template>
    <div class="microItem-cont">
        <div class="header" :style="{'background-image': 'url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536479322856&di=517ac04db4dafd874afe0711413848ab&imgtype=0&src=http%3A%2F%2Fpic.pptbz.com%2F201506%2F2015070581208537.JPG)'}">
            <h3 class="header-title">尼采的超人哲学</h3>
            <p>里德里希·威廉·尼采生平与哲学思考</p>
        </div>
        <div class="nav">
            <div class="audio tab" @click="changeTab(0)">
                <span :class="{'select': navIndex == 0}">音频</span>
            </div>
            <div class="pic tab" @click="changeTab(1)">
                <span :class="{'select': navIndex == 1}">图文</span>
            </div>
        </div>
        <div class="audio-cont" v-show="navIndex == 0">
            <div class="gray-div"></div>
            <div class="audio-title">
                <span class="num">已更新1250条</span>
                <div class="order">
                    <span class="icon"></span>
                    <span class="word">倒序</span>
                </div>
            </div>
            <ul class="audio-list">
                <li class="audio-item">
                    <div class="audio-s">
                        <audio src=""></audio>
                    </div>
                    <div class="audio-decs">
                        <div class="top-line">第一篇|管理技巧-锻炼情商</div>
                        <div class="btm-line"><span>时长：04:45</span><span>1.5MB</span></div>
                    </div>
                </li>
                <li class="audio-item">
                    <div class="audio-s">
                        <audio src=""></audio>
                    </div>
                    <div class="audio-decs">
                        <div class="top-line">第一篇|管理技巧-锻炼情商</div>
                        <div class="btm-line"><span>时长：04:45</span><span>1.5MB</span></div>
                    </div>
                </li>
                <li class="audio-item">
                    <div class="audio-s">
                        <audio src=""></audio>
                    </div>
                    <div class="audio-decs">
                        <div class="top-line">第一篇|管理技巧-锻炼情商</div>
                        <div class="btm-line"><span>时长：04:45</span><span>1.5MB</span></div>
                    </div>
                </li>
            </ul>
        </div>
        <div class="picture-cont" v-show="navIndex == 1">
            <div>
                <div class="gray-div"></div>
                <div class="pic-cont">
                    <div class="pic-title">第一篇 | 偶像的黄昏</div>
                    <div class="pic-img">
                        <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536479322856&di=517ac04db4dafd874afe0711413848ab&imgtype=0&src=http%3A%2F%2Fpic.pptbz.com%2F201506%2F2015070581208537.JPG">
                    </div>
                    <div class="pic-desc">
                    《偶像的黄昏：如何以一支铁槌进行哲学思考》是极具争议性的一本书，书名是取自歌剧尼贝龙根的指环中“诸神的黄昏”。 
                    </div>
                    <div class="pic-ctrl">
                        <div class="blcok date">05-19</div>
                        <div class="blcok eye"><span></span>30000人</div>
                        <div class="blcok thumb"><span></span>566</div>
                    </div>
                </div>
            </div>
            <div>
                <div class="gray-div"></div>
                <div class="pic-cont">
                    <div class="pic-title">第一篇 | 偶像的黄昏</div>
                    <div class="pic-img">
                        <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536479322856&di=517ac04db4dafd874afe0711413848ab&imgtype=0&src=http%3A%2F%2Fpic.pptbz.com%2F201506%2F2015070581208537.JPG">
                    </div>
                    <div class="pic-desc">
                    《偶像的黄昏：如何以一支铁槌进行哲学思考》是极具争议性的一本书，书名是取自歌剧尼贝龙根的指环中“诸神的黄昏”。 
                    </div>
                    <div class="pic-ctrl">
                        <div class="blcok date">05-19</div>
                        <div class="blcok eye"><span></span>30000人</div>
                        <div class="blcok thumb"><span></span>566</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import { Toast } from 'mint-ui';
    export default {
        components: {
            
        },
        data () {
            return {
                navIndex:0
            }
        },
        created() {
            
        },
        methods: {
            changeTab(index) {
                this.navIndex = index;
            }
        }
    }
</script>
<style lang="less" scoped>
    .microItem-cont {
        .header {
            position: relative;
            height: 4.2rem;
            background-position: center center;
            background-repeat: no-repeat;
            background-size: cover;
            h3 {
                position: absolute;
                font-size: 0.44rem;
                color: #fff;
                left: 0.3rem;
                bottom: 0.9rem;
                font-weight: normal;
            }
            p {
                position: absolute;
                font-size: 0.26rem;
                color: #fff;                
                left: 0.3rem;
                bottom: 0.38rem;
            }
        }
        .gray-div {
            height: .15rem;
            background-color: #efefef;
        }
        .nav {
            height: .8rem;
            overflow: hidden;
            .tab {
                width: 50%;
                height: .8rem;
                float: left;
                font-size: .3rem;
                font-weight: bold;
                color: #707070;
                
                span {
                    width: .7rem;
                    text-align: center;
                    display: block;
                    margin: 0 auto;
                    line-height: .8rem;
                    height: .8rem;
                    box-sizing: border-box;
                }
            }
            .select {
                color: #29abae;
                border-bottom: 2px solid #29abae;
            }
        }
        .pic-cont {
            padding: .35rem .3rem 0;
            .pic-title {
                font-size: .36rem;
                font-weight: bold;
                margin-bottom: .3rem;
            }
            .pic-img {
                height: 3rem;
                overflow: hidden;
                border-radius: 5px;
                margin-bottom: .3rem;
                img {
                    display: block;
                    height: 3rem;
                }
            }
            .pic-desc {
                font-size: .28rem;
                padding-bottom: .3rem;
                border-bottom: 1px solid #dfdfdf;
            }
            .pic-ctrl {
                overflow: hidden;
                .blcok {
                    line-height: .7rem;
                    text-align: center;
                    width: 33%;
                    float: left;
                    height: .7rem;
                    font-size: .24rem;
                }
                .eye {
                    span {
                        display: inline-block;
                        background-size: contain;
                        background-position: center center;
                        margin-right: .15rem;
                        width: .22rem;
                        height: .22rem;
                        background-repeat: no-repeat;
                        background-image: url(../../../assets/img/eye-icon.png)
                    }
                }
                .thumb {
                    span {
                        display: inline-block;
                        background-size: contain;
                        margin-right: .15rem;
                        width: .22rem;
                        height: .22rem;
                        background-repeat: no-repeat;
                        background-image: url(../../../assets/img/thumb-icon.png)
                    }
                }
            }
        }
        .audio-title {
            padding: 0 .3rem;
            font-size: .22rem;
            height: .6rem;
            border-bottom: 1px solid #dfdfdf;
            .num {
                line-height: .6rem;
            }
            .order {
                float: right;
                height: .6rem;
                .word {
                    line-height: .6rem;
                }
                .icon {
                    display: inline-block;
                    margin-right: .1rem;
                    vertical-align: middle;
                    background-size: contain;
                    width: .22rem;
                    height: .22rem;
                    background-repeat: no-repeat;
                    background-image: url(../../../assets/img/order-icon.png)
                }
            }
        }
        .audio-list {
            padding-left: .3rem;
            .audio-item {
                padding: .3rem 0 .2rem;
                border-bottom: 1px solid #dfdfdf;
            }
            .audio-s {
                width: .6rem;
                height: .6rem;
                float: left;
                margin-top: .1rem;
                background-image: url(../../../assets/img/audio-pause.png);
                background-size: contain;
            }
            .audio-decs {
                margin-left: 1rem;
                .top-line {
                    font-size: .3rem;
                }
                .btm-line {
                    font-size: .26rem;
                    color: #707070;
                }
                .btm-line {
                    span:last-child {
                        margin-left: .2rem;
                    }
                }
            }
        }
    }
</style>